<template>
	<view class="wrap safe-area">
		<block v-for="(item, index) in list" :key="index">
			<view
				class="item bg-img-set flex align-center"
				:style="'background-image: url(' + $staticImagePath(item.bg) + ')'"
				@click="onDetails(item)"
				v-if="item.status === 1"
			>
				<view class="left-bg flex column just-between">
					<view class="f-26">{{ item.title }}</view>

					<view class="fBold f-60">{{ dataInfo[item.value] || 0 }}</view>

					<view class="f-26 fBold">{{ item.tips }}</view>
				</view>

				<view class="btn-bg flex column">
					<view class="btn f-28 flex align-center just-center" @click.stop="onBtn(item)">
						{{ item.btnTitle }}
					</view>

					<view class="btn f-28 flex align-center just-center" @click.stop="onSend(item)" v-if="item.isSend">
						转赠
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import { getUserWallet } from "@/API/wallet.js";
	export default {
		data() {
			return {
				list: [
					{
						bg: "wallet/balance_bg.png",
						title: "余额钱包",
						tips: "可充值可消费",
						btnTitle: "立即充值",
						value: "balance",
						status: 1,
						isSend: false,
						type: 3,
					},
					{
						bg: "wallet/redbag_bg.png",
						title: "红包钱包",
						tips: "可提现可消费",
						btnTitle: "提现到零钱",
						value: "bribe",
						status: 1,
						isSend: false,
						type: 2,
						walletType: "1",
					},
					{
						bg: "wallet/sale_bg.png",
						title: "销售钱包",
						tips: "可消费可提现可转赠",
						btnTitle: "立即提现",
						value: "money",
						status: 0,
						isSend: true,
						type: 1,
						walletType: "2",
					},
					{
						bg: "wallet/commission_bg.png",
						title: "分佣钱包",
						tips: "可消费可提现可转赠",
						btnTitle: "立即提现",
						value: "commission",
						status: 0,
						isSend: true,
						type: 4,
						walletType: "3",
					},
				],
				dataInfo: null,
			};
		},
		onShow() {
			this.$commonNetwork.getUserIdenInfoData((res) => {
				//如果是商家 才会有销售钱包
				if (res.code == 1) {
					this.list.forEach((item) => {
						if (item.value === "money") {
							item.status = 1;
						}
					});
				}
				//普通用户和城市合伙人才有红包钱包
				// if (res.code == 0 || res.partner_type == 3) {
				// 	this.list.forEach((item) => {
				// 		if (item.value === "bribe") {
				// 			item.status = 1;
				// 		}
				// 	});
				// }
				//城市合伙人才会有分佣钱包  身份类型:1=个人合伙人,2=商户合伙人,3=城市服务商
				if (res.partner_type !== null) {
					this.list.forEach((item) => {
						if (item.value === "commission") {
							item.status = 1;
						}
					});
				}
			});

			this.getData();
		},
		methods: {
			/**
			 * 点击按钮
			 */
			onBtn(item) {
				if (item.value === "balance") {
					//立即充值
					this.$jump.to("/pages/mine/wallet/recharge");
				} else {
					//提现
					this.$jump.to(`/pages/mine/wallet/withdraw?type=${item.walletType}`);
				}
			},
			/**
			 * 详情
			 */
			onDetails(item) {
				this.$jump.to(`/pages/mine/wallet/walletDetail?type=${item.type}`);
			},
			/**
			 * 赠送
			 */
			onSend(item) {
				this.$jump.to(`/pages/user/transfer/account`);
			},
			/**
			 * 网络请求
			 */
			getData() {
				getUserWallet().then((res) => {
					this.dataInfo = res.data;
				});
			},
		},
	};
</script>

<style lang="scss">
	.wrap {
		padding: 25rpx;
		box-sizing: border-box;

		.item {
			width: 700rpx;
			height: 260rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			gap: 20rpx;

			&:last-child {
				margin-bottom: 0rpx;
			}

			.left-bg {
				margin-left: 45rpx;
				flex: 1;
				height: 160rpx;
				overflow: hidden;
				color: white;
			}

			.btn-bg {
				height: 160rpx;
				margin-right: 40rpx;
				gap: 30rpx;

				.btn {
					width: 180rpx;
					height: 68rpx;
					border-radius: 10rpx;
					overflow: hidden;
					border: 2rpx solid white;
					color: white;
				}
			}
		}
	}
</style>
